<template>
	<view>
		<view v-if="areaListShow" @click="areaListShow = false" class="mask"></view>
		<view class="picker-tool" v-if="areaListShow">
			<view @click="setShow(false)">取消</view>
			<view @click='confirm'>确定</view>
		</view>
		<picker-view v-if="areaListShow" indicator-style="height: 50px;" :value="areaListIndex" @change="bindChange"
			class="picker-view" @pickstart="start" @pickend="end">
			<picker-view-column>
				<view class="item" v-for="(v,k) in province" :key="k">{{v.name}}</view>
			</picker-view-column>
			<picker-view-column>
				<view class="item" v-for="(v,k) in city" :key="k">{{v.name}}</view>
			</picker-view-column>
			<!-- <picker-view-column>
				<view class="item" v-for="(v,k) in county" :key="k">{{v.name}}</view>
			</picker-view-column> -->
		</picker-view>
	</view>
</template>

<script>
	import {
		getAreaList
	} from "@/API/common.js";
	export default {
		props: {
			// 每次打开重置索引
			openReset: {
				type: Boolean,
				default: true,
			},
			// 有没有区/县(备用)
			hasCounty: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				areaList: [],
				areaListIndex: [0, 0, 0],
				areaListShow: false,

				canConfirm: true,
			}
		},
		computed: {
			province() {
				let province = this.areaList
				let all = {
					id: 0,
					name: '全国',
					children: []
				}

				province.unshift(all)

				return province
			},
			city() {
				let city = [...this.areaList[this.areaListIndex[0]].children]
				let all = {
					id: 0,
					name: '全部',
					children: []
				}

				city.unshift(all)

				return city
			},
			// county() {
			// 	let county = [...this.city[this.areaListIndex[1]].children]
			// 	let all = {
			// 		id: 0,
			// 		name: '全部',
			// 		children: []
			// 	}

			// 	county.unshift(all)

			// 	return county
			// }
		},
		mounted() {
			getAreaList().then((res) => {
				this.areaList = res.data
			})
		},
		methods: {
			setShow(bool = true) {
				if (this.openReset) this.areaListIndex = [0, 0, 0]
				this.areaListShow = bool
			},
			setValue(value) {
				this.areaListShow = value
			},
			bindChange(e, a) {
				console.log('-=-=-=e', e, a)
				let value = e.detail.value
				if (value[0] != this.areaListIndex[0]) {
					value[1] = 0
					// value[2] = 0
				}
				// if (value[1] != this.areaListIndex[1]) {
				// 	value[2] = 0
				// }
				console.log('-=-=-=value', value)
				this.areaListIndex = value
			},
			confirm() {
				if(!this.canConfirm) return
				
				let province = this.province[this.areaListIndex[0]]
				let city = this.city[this.areaListIndex[1]]

				this.$emit('confirm', [province, city])
				this.setShow(false)
			},
			start() {
				console.log('-=-=-=start')
				this.canConfirm = false
			},
			end() {
				console.log('-=-=-=end')
				this.canConfirm = true
			}
		}
	}
</script>

<style lang="scss" scoped>
	$picker-height: 400rpx;
	$picker-index: 99;

	.mask {
		background-color: rgba(0, 0, 0, .5);
		position: fixed;
		left: 0;
		top: 0;
		width: 100vw;
		height: 100vh;
		z-index: 98;
	}

	.picker-tool {
		position: fixed;
		left: 0;
		width: 750rpx;
		bottom: $picker-height;
		z-index: $picker-index;
		padding: 30rpx 50rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		background-color: #fff;
		border-bottom: 1px solid #ddd;
	}

	.picker-view {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 750rpx;
		height: $picker-height;
		z-index: $picker-index;
		background-color: #fff;
	}

	.item {
		line-height: 100rpx;
		text-align: center;
	}
</style>